<template>
  <div id="home">
    <div class="nav">
      <div class="item" :class="{'active':navIndex===0}" @click="changeNav(0)">正在热映</div>
      <div class="item" :class="{'active':navIndex===1}" @click="changeNav(1)">即将上映</div>
    </div>
    <scroll class="list" ref="list" :data="movies.subjects">
      <ul>
        <template v-for="item in movies.subjects">
          <router-link tag="li"
                       class="item"
                       :to="`/detail/${item.id}`">
            <img v-lazy="item.images.large" alt="">
            <p class="text">{{item.title}}</p>
          </router-link>
        </template>

      </ul>
      <div class="loading" v-show="isLoading">
        <loading></loading>
      </div>
    </scroll>
    <router-view></router-view>
  </div>
</template>

<script type="text/ecmascript-6">
  import {getMovies, getComingSoon} from '@/api/home'
  import scroll from '@/base/scroll/scroll'
  import loading from '@/base/loading/loading'
  import {mapGetters, mapActions} from 'vuex'
  export default {
    data() {
      return {
        navIndex: 0,   // 默认是正在上映
        movies: {},
        isLoading: false
      }
    },
    mounted() {

      this._getMoviesHome()
    },
    computed: {
      ...mapGetters([
        'hotMovies',
        'upMovies'
      ])
    },
    methods: {
      changeNav(index) {
        this.navIndex = index
        this.movies={}
        if (this.navIndex === 0) {
          this._getMoviesHome()
        } else {
          this._getComingSoon()
        }
      },
      async _getMoviesHome() {
        try {

          this.isLoading = true

          await this.setHotMovies()

          this.movies = this.hotMovies

        }
        finally {
          this.isLoading = false
        }
      },

      async _getComingSoon() {
        try {
          this.isLoading = true

          await this.setupMovies()

          this.movies = this.upMovies

        } finally {
          this.isLoading = false
        }
      },
      ...mapActions(['setHotMovies', 'setupMovies'])
    },
    components: {
      scroll,
      loading
    }
  }
</script>


<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "~@/assets/css/color.styl"
  #home {
    position fixed
    top 0
    bottom 0
    left: 0
    right: 0
    background-color $bg-color
    .nav {
      margin-left 10px
      margin-right: 10px
      margin-top 20px
      background-color: #373737;
      display flex
      height 40px
      line-height 40px
      text-align center
      box-shadow: 0 2px 4px #111;
      border-radius 5px
      .item {
        flex 1
        color #000
        border-right 1px solid #000
        &.active {
          color #fcfcfc;
          font-weight: bold;
        }
      }
    }
    .list {
      overflow hidden
      position fixed
      top 80px
      bottom 0
      left: 10px
      right: 10px
      text-align center
      ul {
        overflow hidden
      }
      .item {
        width 33%
        float left
        margin-bottom 30px
        img {
          width 90%
          height 162px
          box-shadow: 3px 3px 4px #111;
        }
        .text {
          margin-top 10px
          font-size 14px
          color #fff
          white-space: nowrap
          overflow: hidden
          text-overflow: ellipsis
        }
      }
      .loading {
        width 100%
        position absolute
        left 50%
        top: 50%
        transform translate3d(-50%, -50%, 0)
      }
    }
  }
</style>
